<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
		<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
		<script type="text/javascript" src="d3.v3.min.js"></script>
    <title></title>
</head>
<body>
	<div id="body">
		<div id="header">
			Tools
		</div>
    <div id="dis">
            <!-- <img src="x.png" class="img-circle" > -->

    </div>
		<div id="footer"></div>
		<script type="text/javascript">
	



var m = [20, 120, 20, 20],
    w = 1280 - m[1] - m[3],
    h = 800 - m[0] - m[2],
    i = 0,
    root;

// root.each = function(funcname){
//   funcname(this);
//   if (this.hasOwnProperty("children")){
//     this.children.forEach(function(d){
//       this.each(d);
//     })  
//   }
  
// }

var tree = d3.layout.tree()
    .size([h, w]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#body").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

function init(f){
  d3.json(f, function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;

    update(root);
    // console.log("1")
  });

}

function find_n(r, n){

  if(n.name == r.name){
    console.log(r.name, n.name);
    return n;
  }else if (r.hasOwnProperty("children")){
    r.children.forEach(function(d){
      return find_n(d, n);  
    })
  }else{
    return null;
  }
}

function every(f, root){
  d3.json(f, function(json){
    start = json.root
    new_one_parent = find_n(root, start)
    new_one_parent.children = json.add;
    
  })

  update(root);
}

// Toggle children.
function toggle(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
}



function display(a) {
  // body...

  console.log(a)
  var dis = d3.selectAll("#dis");
  var nodes = dis.selectAll("div.not")
    .data(a, function(d){ return a});

  var node = nodes.enter().append("div")
    .attr("class","not");
    // .remove()
    // .append("div");
      // .attr('src','x.png');

  node
    .append("image")
    .attr("style","width:20,height:20")
    .attr("xlink:href","x.png");

  node
    .append("p")
    .text(a.name);
    
}
var toggle_root = null;

function record(d){
  toggle_root = d;
}

var data_nodes = null;

function find_root(node){
  var root_node = node;
  if (root_node.hasOwnProperty("parent")){
    // if (root_node.hasOwnProperty("children")){
    //   return find_root(root_node.children)
    // }
    root_node = root_node.parent;
    return find_root(root_node);
  }else{
    return root_node;
  }
}

function compare_tree(tr1, tr2){

  if (tr1 != tr2){
    return tr2;
  }else if (tr1 == tr2 && tr1.hasOwnProperty("children") && tr2.hasOwnProperty("children")){
    for(i =0 ; i < tr1.children.length  ;i++){
      return compare_tree(tr1.children[i], tr2.children[i]);
    }
  }else{
    return null;
  }
}

function update(source) {
  var duration = d3.event && d3.event.altKey ? 500 : 50;

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse();
  data_nodes = nodes;
  // Normalize for fixed-depth.
  nodes.forEach(function(d) { 
    d.y = d.depth * 180; 
  });

  // Update the nodes…
  var node = vis.selectAll("g.node")
      .data(nodes, function(d) { 
        return d.id || (d.id = ++i); 
      });

  // var filed_nodes = node.forEach(function(d){
  //   if (d == toggle_root){
  //     console.log("filed ");
  //     node.pop(d);
  //   }
  // });

  var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      // .attr("transform", function(d) { 
      //   return "translate(" + source.y0 + "," + source.x0 + ")"; 
      // })
      .attr("x", function(d){ return source.x0})
      .attr("y", function(d){ return source.y0})
      // .style('height','80px')
      .on("click", function(d) { 
        toggle(d); 
        update(d); 
      });
      // .on("mouseover",function(d){
      //   display(d);
      // });

  nodeEnter.append("svg:circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  var nodeA = nodeEnter.append('a')
      .attr('xlink:href', function(d) {
        return d.url;
      })
      .append("svg:text")
      .attr("x", function(d) { 
        // console.log(d.children);
        return d.children || d._children ? -10 : 10; 
      })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style('fill', function(d) {
        return d.free ? 'black' : '#999';
      })
      .style("fill-opacity", 1e-6);

  
  
  nodeEnter.append("svg:title").text(
    function(d){
      return d.description;
  });

  // Transition nodes to their new position.
  var nodeUpdate = node
      .transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  nodeUpdate.select("circle")
      .attr("r", 6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit()
      .transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = vis.selectAll("path.link")
      .data(tree.links(nodes), function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("svg:path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      })
      .transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit()
      .transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}


init('data.json')
setInterval(function(){
  every("new.json",root);
}, 4000);
  


		</script>
    <script type="text/javascript" src="./test.js"></script>
	</div>
</body>
</html>
